<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字符串类型使用(String type usage)</title>
  <!-- 
  在JavaScript中， String 类型用于表示文本数据。字符串是由零个或多个字符组成的不可变序列。
  一、创建字符串
  1. 字面量：
    - 使用单引号、双引号或反引号（模板字符串）来定义字符串。
    let str1 = 'Hello, World!'; // 单引号
    let str2 = "Hello, World!"; // 双引号
    let str3 = Hello, World!;  // 模板字符串

  2. 构造函数：
    - 使用 String 构造函数创建字符串对象。
    let strObj = new String("Hello, World!");
    注意：使用构造函数会创建一个对象，而不是原始字符串，通常不推荐这种方式。

  二、字符串的基本操作
  1. 字符串长度：
    - 使用 .length 属性获取字符串的长度。
    let str = "Hello";
    console.log(str.length); // 输出5

  2. 访问字符：
    - 使用索引访问字符串中的字符，索引从0开始。
    console.log(str[0]); // 输出'H'

  3. 字符串拼接：
    - 使用 + 运算符或 concat() 方法拼接字符串。
    let greeting = "Hello, " + "World!"; // 使用+运算符
    let greeting2 = "Hello, ".concat("World!"); // 使用concat()方法

  4. 模板字符串：
    - 使用反引号（      ）可以创建多行字符串，并支持插值。
    let name = "Alice";
    let message = Hello, ${name}!; // 输出 "Hello, Alice!"

  三、常用字符串方法
  1. 查找和提取：
    -  indexOf(substring) ：返回子字符串首次出现的位置，未找到返回-1。
    -  lastIndexOf(substring) ：返回子字符串最后一次出现的位置。
    -  slice(start, end) ：提取字符串的一部分。
    -  substring(start, end) ：提取字符串的一部分，类似于 slice 。
    let str = "Hello, World!";
    console.log(str.indexOf("World")); // 输出7
    console.log(str.slice(0, 5)); // 输出"Hello"

  2. 转换大小写：
    -  toUpperCase() ：将字符串转换为大写。
    -  toLowerCase() ：将字符串转换为小写。
    console.log(str.toUpperCase()); // 输出"HELLO, WORLD!"
    console.log(str.toLowerCase()); // 输出"hello, world!"
    
  3. 替换和分割：
    -  replace(old, new) ：替换字符串中的指定部分。
    -  split(separator) ：将字符串分割成数组。
    let newStr = str.replace("World", "JavaScript"); // 输出"Hello, JavaScript!"
    let words = str.split(", "); // 输出["Hello", "World!"]

  4. 去除空格：
    -  trim() ：去除字符串两端的空格。
    let paddedStr = "   Hello, World!   ";
    console.log(paddedStr.trim()); // 输出"Hello, World!"

  四、总结
  -  String 类型用于表示文本数据，可以使用字面量或构造函数创建。
  - 支持多种操作，如获取长度、拼接、查找、提取、替换和分割等。
  - 模板字符串提供了更灵活的字符串创建方式，支持多行和插值。
  - 理解 String 类型的用法有助于更有效地处理文本数据。

  掌握JavaScript中的字符串操作可以提高代码的可读性和维护性。
   -->
</head>
<body>

  <script>
    // 1. 获取字符串长度
    let str = "Hello, World!";
    console.log("1. 获取字符串长度", str.length); // 输出13

    // 2. 拼接字符串
    let greeting = "Hello";
    let name = "World";
    let message = greeting + ", " + name + "!"; // 输出"Hello, World!"
    console.log("2. 拼接字符串", message);

    // 3. 查找字符串
    let index = str.indexOf("World"); // 输出7
    console.log("3. 查找字符串", index);

    // 4. 提取字符串
    let subStr = str.substring(0, 5); // 输出"Hello"
    console.log("4. 提取字符串", subStr);
    let subStr2 = str.slice(7); // 输出"World!"
    console.log("4. 提取字符串", subStr2);

    // 5. 替换和分割
    let newStr = str.replace("World", "JavaScript"); // 输出"Hello, JavaScript!"
    console.log("5. 替换和分割", newStr);
    let words = str.split(", "); // 输出["Hello", "World!"]

    // 6. 模板字符串
    let templateStr = `Hello, ${name}!`;
    console.log("6. 模板字符串", templateStr); // 输出"Hello, World!"

    // 7. 去除空格
    let paddedStr = "   Hello, World!   ";
    console.log("7. 去除空格", paddedStr.trim()); // 输出"Hello, World!"
    console.log("7. 去除空格", paddedStr.trimStart()); // 输出"Hello, World!   "
    console.log("7. 去除空格", paddedStr.trimEnd()); // 输出"   Hello, World!"

    // 8. 大小写转换
    let lowerCaseStr = str.toLowerCase(); // 输出"hello, world!"
    console.log("8. 大小写转换", lowerCaseStr);
    let upperCaseStr = str.toUpperCase(); // 输出"HELLO, WORLD!"
    console.log("8. 大小写转换", upperCaseStr);

    // 9. 字符串长度
    console.log("9. 字符串长度", str.length); // 输出13
    
    // 10. 字符串拼接
    let combinedStr = str.concat(", ", "JavaScript"); // 输出"Hello, World!, JavaScript"
    console.log("10. 字符串拼接", combinedStr);

    // 11. 字符串查找
    console.log("11. 字符串查找", str.includes("World")); // 输出true
    console.log("11. 字符串查找", str.startsWith("Hello")); // 输出true
    console.log("11. 字符串查找", str.endsWith("!")); // 输出true
    console.log("11. 字符串查找", str.indexOf("o")); // 输出4
    console.log("11. 字符串查找", str.lastIndexOf("o")); // 输出7

    // 12. 字符串截取
    console.log("12. 字符串截取", str.slice(0, 5)); // 输出"Hello"
    console.log("12. 字符串截取", str.substring(0, 5)); // 输出"Hello"
    console.log("12. 字符串截取", str.substr(0, 5)); // 输出"Hello"

    // 13. 字符串分割
    console.log("13. 字符串分割", str.split(", ")); // 输出["Hello", "World!"]

    // 14. 字符串替换
    console.log("14. 字符串替换", str.replace("World", "JavaScript")); // 输出"Hello, JavaScript!"

    // 15. 字符串重复
    console.log("15. 字符串重复", str.repeat(2)); // 输出"Hello, World!Hello, World!"

    // 16. 字符串转数组
    console.log("16. 字符串转数组", Array.from(str)); // 输出["H", "e", "l", "l", "o", ",", " ", "W", "o", "r", "l", "d", "!"]

    // 17. 字符串转数字
    console.log("17. 字符串转数字", Number(str)); // 输出NaN

    // 18. 字符串转布尔值
    console.log("18. 字符串转布尔值", Boolean(str)); // 输出true

    // 19. 字符串遍历
    for (let char of str) {
      console.log("19. 字符串遍历", char);
    }

    for (let i = 0; i < str.length; i++) {
      console.log("19. 字符串遍历", str[i]);
    }

  </script>
  
</body>
</html>